<template>
	<view class="page">
		<view class="yhq-box">
			<view class="title">我的优惠券</view>
			<view class="person" v-for="(item,index) in youhuiquan" :key="index" @click="chooseyouhuiquan(item)">
				<image src="/static/yhq.png"></image>
				<view class="textBox" >
											<view class="left" >
												<view>已</view>
												<view>领</view>
												<view>取</view>
											</view> 
											<view class="right">
												<text>{{item.waterPrice}}元</text>
												<text>{{item.waterName}}</text>
											</view> 
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { listwaterinfobyselective} from '@/common/api.js';
	import {
			onLoad,onShow,
			onReady,
			onShareAppMessage,
			onShareTimeline,onPullDownRefresh
		} from '@dcloudio/uni-app';
		import {
			reactive,
			toRefs,
			ref,
			getCurrentInstance
		} from 'vue';
	const app = getApp();
	const data = reactive({
		youhuiquan:[],
		params:{},
		baseFormData:{}
	})
	const { youhuiquan,params,baseFormData } = toRefs(data);
	onLoad(option => {
	       if(option.params){
			   let data=JSON.parse(option.params)
			   params.value=data
		   }
			if(option.baseFormData){
				baseFormData.value=JSON.parse(option.baseFormData)
			}
			

			
			let currUser = uni.getStorageSync('currUser')
			let form={userid:currUser.userid,waterStatus:'',waterType:''}
             if(params.value.proId){
				 form.waterType=params.value.proId
			 }
			listwaterinfobyselective(form).then(res=>{
						  youhuiquan.value=res.extend.list
			})
		
	});
    function chooseyouhuiquan(item){
		if( params.value.proId){
			 let form={
			 	...params.value,
			 	...item,
			 }
			 uni.redirectTo({
			 	url: '/pages/index/recoveryOrder?params='+JSON.stringify(form)+'&baseFormData='+JSON.stringify(baseFormData.value)
			 });
		}

	}
</script>

<style scope lang="scss">
.page{
	background:#fff;
	min-height:100vh;
	padding:30rpx;
}
.yhq-box{
	.title{
		font--size:16px;
		font-weight: bold;
		line-height:30px;
	}
	.person{
		position:relative;
		width:100%;
		height:240rpx;
		image{
			width:100%;
			height:240rpx;
			position:absolute;
			top:0;
			left:0;
			z-index:0;
		}
		.textBox{
			.left{
				position:absolute;
				top:60rpx;
				left:0;
				z-index:1;
				color:#fff;
				font-weight: bold;
				font-size:17px;
				width:18%;
				text-align:center;
			}
			.right{
				padding:0 30rpx;
				position:absolute;
				top:0;
				left:18%;
				width:82%;
				height:240rpx;
				z-index:1;
				display:flex;
				flex-direction: column;	
				justify-content: center;
				text:nth-child(1){
					font-size:16px;
					font-weight: bold;
				}
			}
		}
	}
}
</style>
